<template>
  <div class="cancel-travel-items">
    <el-dialog
      title="取消的出行人列表"
      top="1rem"
      width="80%"
      :visible.sync="selfShow">
      <el-table
        v-loading="loading"
        element-loading-text="数据载入中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255,255,255, 0.4)"
        style="min-height: 400px"
        :data="items">
        <el-table-column
          label="姓名">
          <template slot-scope="scope">
            {{scope.row.fullname}}
          </template>
        </el-table-column>
        <el-table-column
          label="性别">
          <template slot-scope="scope">
            {{travel_sex[scope.row.travel_sex]}}
          </template>
        </el-table-column>
        <el-table-column
          label="类型">
          <template slot-scope="scope">
            {{travel_type[scope.row.travel_type]}}
          </template>
        </el-table-column>
        <el-table-column
          label="手机号">
          <template slot-scope="scope">
            {{scope.row.travel_mobile}}
          </template>
        </el-table-column>
        <el-table-column
          label="证件类型">
          <template slot-scope="scope">
            {{travel_certificate[scope.row.travel_certificate_type]}}
          </template>
        </el-table-column>
        <el-table-column
          label="证件号码">
          <template slot-scope="scope">
            {{scope.row.travel_certificate_number}}
          </template>
        </el-table-column>
        <el-table-column
          label="价格">
          <template slot-scope="scope">
            {{(Number(scope.row.price) / 100).toFixed(2)}}元
          </template>
        </el-table-column>
        <el-table-column
          label="上车点">
          <template slot-scope="scope">
            {{scope.row.activity_collection_point.title ?
            scope.row.activity_collection_point.title :
            scope.row.activity_collection_point.address}}
          </template>
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            {{statusText[scope.row.status]}}
          </template>
        </el-table-column>
        <el-table-column
          label="取消原因">
          <template slot-scope="scope">
            {{scope.row.cancel_reason}}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:show', false)">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    refundId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      travel_certificate: {
        1: '大陆身份证',
        2: '香港证件',
        3: '澳门证件',
        4: '台湾证件',
        5: '护照'
      },
      orderStatus: {
        1: '待支付',
        2: '支付超时(交易关闭)',
        3: '订单已全部退款',
        4: '交易关闭(未支付时出行人被全部取消)',
        5: '申请退款中',
        99: '报名成功'
      },
      statusText: {
        1: '待支付',
        2: '已取消(未支付取消)',
        3: '已取消(已退款取消)',
        4: '申请取消中',
        5: '退款中',
        99: '报名成功'
      },
      travel_sex: {
        1: '男',
        2: '女'
      },
      travel_type: {
        1: '成人',
        2: '儿童'
      },
      items: [],
      loading: false,
      selfShow: false
    }
  },
  watch: {
    show (val) {
      this.selfShow = val
      if (val) {
        this.getItems()
      }
    },
    selfShow (val) {
      if (!val) {
        this.detail = {attach: []}
        this.$emit('update:show', false)
      }
    }
  },
  methods: {
    /**
     * @purpose 获取列表数据
     */
    getItems () {
      this.items = []
      this.loading = true
      this
        .$api
        .activityOrderRefund
        .cancelTravelItems(this.refundId)
        .then(r => {
          this.loading = false
          this.items = r
        })
        .catch(e => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped></style>
